<template>
  <div class="search-item">
    <div v-if="label" class="item-label">{{ label }}</div>
    <div v-else-if="$slots.label" class="item-label">
      <slot name="label"></slot>
    </div>
    <div v-else-if="$slots.select" class="select-label">
      <slot name="select"></slot>
    </div>

    <div v-if="$slots.select" class="item-content select-content">
      <slot name="content"></slot>
    </div>
    <div v-else-if="$slots.button" class="btn-item-content">
      <slot name="button"></slot>
    </div>
    <div v-else class="item-content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    label: { type: String, default: '' }
  }
}
</script>

<style lang="scss" scoped>
.btn-item-content {
  // padding-bottom: 20px;
}
</style>
